<template>
  <div>
    <el-row>
      <el-col :offset="2" :span="8">
        <el-input
          :id="suggestId"
          v-model="address_detail"
          :clearable="clearable"
          placeholder="请输入店铺地址,获取店铺坐标"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button id="position" @click="search" type="primary">定位</el-button>
      </el-col>
      <el-col :span="12">
        <el-tag
          type="success"
          v-clipboard:copy="userlocation.lng"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >经度 {{userlocation.lng}}</el-tag>
        <el-tag
          type="success"
          v-clipboard:copy="userlocation.lat"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >纬度 {{userlocation.lat}}</el-tag>
        <el-tag type="success">点击复制经纬度信息</el-tag>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="2" :span="18">
        <div id="map_canvas" class="allmap"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Bmap",
  data() {
    return {
      address_detail: "", //详细地址
      userlocation: { lng: 116.404, lat: 39.915 },
      clearable: true,
      suggestId: "suggestId",
      map: {},
      mk: {}
    };
  },
  created() {},
  methods: {
    drawMap() {
      this.map = new BMap.Map("map_canvas"); // 创建地图实例
      this.map.addControl(new BMap.NavigationControl()); // 启用放大缩小 尺
        //地图、混合
      this.map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));

      this.getlocation(); //获取当前坐标, 测试时获取定位不准。
      var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标
      this.map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别
      var marker = new BMap.Marker(point); // 创建标注
      this.map.addOverlay(marker); // 将标注添加到地图中
      
    },
    getMarker(point) {
      this.mk = new BMap.Marker(point);
      this.mk.addEventListener("dragend", this.showInfo);
      this.mk.enableDragging(); //可拖拽
      this.getAddress(point);
      this.map.addOverlay(this.mk); //把点添加到地图上
      this.map.panTo(point);
    },
    getlocation() {
      //获取当前位置
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(r => {
        if (geolocation.getStatus() == BMAP_STATUS_SUCCESS) {
          this.getMarker(r.point);
          this.userlocation = r.point;
        } else {
          alert("failed" + this.getStatus());
        }
      });
    },
    //绑定Marker的拖拽事件
    showInfo(e) {
      var gc = new BMap.Geocoder();
      gc.getLocation(e.point, rs => {
        var addComp = rs.addressComponents;
        var address =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber; //获取地址

        //画图 ---》显示地址信息
        var label = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
        this.map.removeOverlay(this.mk.getLabel()); //删除之前的label

        this.mk.setLabel(label);
        this.address_detail = address;
        this.userlocation = e.point;
      });
    },
    //获取地址信息，设置地址label
    getAddress(point) {
      var gc = new BMap.Geocoder();

      gc.getLocation(point, rs => {
        var addComp = rs.addressComponents;
        var address =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber; //获取地址

        //画图 ---》显示地址信息
        var label = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
        this.map.removeOverlay(this.mk.getLabel()); //删除之前的label
        this.address_detail = address;
        this.mk.setLabel(label);
      });
    },
    setPlace() {
      this.map.clearOverlays(); //清除地图上所有覆盖物
      var th = this;
      function myFun() {
        th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        th.map.centerAndZoom(th.userlocation, 18);
        th.getMarker(th.userlocation);
      }

      var local = new BMap.LocalSearch(this.map, {
        onSearchComplete: myFun //智能搜索
      });
      local.search(this.address_detail);
    },
    search() {
      var localSearch = new BMap.LocalSearch(this.map);
      localSearch.enableAutoViewport(); //允许自动调节窗体大小
      this.searchByInputName(localSearch);
    },
    searchByInputName(localSearch) {
      this.map.clearOverlays(); //清空原来的标注
      var th = this;
      var keyword = this.address_detail;
      localSearch.setSearchCompleteCallback(function(searchResult) {
        var poi = searchResult.getPoi(0);
        th.userlocation = poi.point;
        th.map.centerAndZoom(poi.point, 13);
        th.getMarker(th.userlocation);
      });
      localSearch.search(keyword);
    },
    onCopy() {
      this.$message("内容已复制到剪贴板!");
    },
    onError() {
      this.$message("内容复制失败,请重试!");
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawMap();
    });
  }
};
</script>
<style scoped>
.BMap_cpyCtrl {
  display: none !important;
}

.allmap .anchorBL {
  display: none !important;
  border:1px red solid
}
.allmap {
  width: 100%;
  height: 500px;
  font-family: "微软雅黑";
  border: 1px solid green;
}
.el-tag {
  cursor: pointer;
}
</style>